<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>-->
    <!-- 引入 layui.css -->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />

    <!-- 引入 layui.js -->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>


    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        function ShowAddBox(){
            layer.open({
                type:1,
                title:"登录",
                area:["395px","300px"],
                content:$("#addBox"),
            });
        }


        function editString(rkey){
            var rkey = rkey;
            // layer.msg(rkey);
            document.getElementById("key").textContent=rkey;
            document.getElementById("valueInput").value=rkey;
            layer.open({
                type:1,
                title:"登录",
                area:["395px","300px"],
                content:$("#editBox")
            });
        }



        function delString(redisKey){
            var rediskey=redisKey;

            $.ajax({
                url: "http://localhost:8080/delString",
                type: "POST",
                data:{redisKey:rediskey},
                dataType: "text",
                success: function(data){
                    alert("删除成功！");
                    window.location.href= "http://localhost:8080/string_list";
                },
                error:function(err){
                    console.log(err.statusText);
                    console.log('异常');
                }
            });
        }
    </script>

</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div th:replace="common/frame::header"></div>
    <div th:replace="common/frame::side"></div>

    <div class="layui-body">
        <!-- 内容主体区域 -->

<!--        <h1>当前Redis中所有key</h1>-->
        <table class="layui-table">
            <tr >
                <td>序号</td>
                <td>key</td>
                <td>value</td>
                <td>操作</td>
            </tr>
            <tr th:each="key,stat:${strList}">
                <td th:text="${stat.count}" ></td>
                <td th:text="${key.keySet()[0]}"></td>
                <td th:text="${key.values()[0]}"></td>
                <td>

                    <a th:onclick="editString( [[${key.keySet()[0]}]])" style="margin-left: 10px"><i class="layui-icon  layui-icon-edit" onmousemove=""></i></a>
                    <a th:onclick="delString( [[${key.keySet()[0]}]])"  style="margin-left: 10px"><i class="layui-icon layui-icon-reduce-circle"></i></a>
                    <a style="margin-left: 10px"><i class="layui-icon layui-icon-about"></i></a>
                </td>

                <!--        <td><a th:href=""></a></td>-->
            </tr>
        </table>

        <button class="layui-btn" th:onclick="ShowAddBox()">添加</button>
        <div th:replace="common/frame::foot"></div>
    </div>
</div>

<div id="addBox" style="display: none">
    <form class="layui-form" th:action="@{addString}" method="post">
        <div class="layui-form-item">
           key: <input name="rkey" type="text" th:placeholder="key">
        </div>
      <div class="layui-form-item">
           value:<input name="rvalue" type="text" placeholder="值(value)">
      </div>
        <button type="submit">提交</button>
    </form>
</div>

<div id="editBox" style="display: none">
    <h1 id="key">Ddd</h1>
    <form class="layui-form" th:action="@{editString}" method="post">
        <div class="layui-form-item">
            value:<input name="key" type="text" style="display: none"  id="valueInput">
        </div>

        <div class="layui-form-item">
            value:<input name="rvalue" type="text" placeholder="值(value)">
        </div>
        <button type="submit">提交</button>
    </form>
</div>


</body>



<!--点击事件测试，有效-->
<!--<button th:onclick="delString('key')">点击</button>-->
<script type="module">
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    import * as layui from "../static/js/dropzone/dropzone";

    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>

</html>